<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
    <style>
        html {
        }

        body {
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: space-around;
        }

        #upForm {
            width: 300px;
            height: 400px;
        }

        #upForm > form > div > label {
            width: 50px;
            display: inline-block;
        }

        #upForm > form > div {
            margin-top: 20px;
        }
    </style>
</head>
<body>
<div id="upForm">
    <p id="submit_p" style="text-align: center;font-size: 20px"></p>
    <form>
        <div>
            <label>姓 名:</label>
            <input type="text" id="userName">
        </div>
        <div>
            <label>Q Q:</label>
            <input type="text" id="qq">
        </div>
        <div>
            <label>邮 箱:</label>
            <input type="text" id="email">
        </div>
        <div>
            <label>电 话:</label>
            <input type="text" id="phone">
        </div>
        <div>
            <label>学 院:</label>
            <input type="text" id="college">
        </div>
        <div>
            <label>年 级:</label>
            <!--            <input type="text" id="grade">-->
            <select name="cars" id="grade">
                <option value="2019">2019</option>
                <option value="2020">2020</option>
                <option value="2021">2021</option>
                <option value="2022">2022</option>
                <option value="2023">2023</option>
                <option value="2024">2024</option>
            </select>
        </div>
        <div>
            <label>校验码:</label>
            <input type="text" id="code" style="width: 68px">
            <button onclick="return sendEmail()">获取校验码</button>
        </div>
        <input type="submit" onclick="return submitInfo()" value="提交" style="margin-top: 10px">
    </form>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
<script>
    const host = 'http://' + location.host;

    function setP() {
        let obj = document.getElementById('submit_p');
        const htmlNameUrl = host + '/meeting/' + decode();
        axios.get(htmlNameUrl)
            .then(res => {
                console.log(res)
                if (res.data.code !== 200) {
                    alert('获取数据错误!');
                    obj.innerText = '错误页面';
                } else {
                    obj.innerText = res.data.data;
                }
            }).catch(error => {
            console.log(error)
        })
    }

    //格式 路径+ ?Base64加密数据
    function decode() {
        let url = window.location.search.substring(1);
        let query = window.atob(url);
        let vars = query.split("&");
        for (let i = 0; i < vars.length; i++) {
            let pair = vars[i].split("=");
            if (pair[0] === 'id') {
                return pair[1];
            }
        }
        return '0'
    }

    //发送校验码
    function sendEmail() {
        const emailValue = document.getElementById('email').value;
        if (emailValue === '' || emailValue === null) {
            alert('邮箱为空，无法获取校验码!')
        } else {
            const registerUrl = '/email/send';
            axios.get(host + registerUrl, {
                params: {
                    email: emailValue,
                    scope: 'REGISTER'
                }
            }).then(function (response) {
                if (response.data.code === 200) {
                    alert('发送校验码成功!')
                } else {
                    alert(response.data.message)
                }
            }).catch(function (error) {
                console.log(error)
            })
        }
        return false;
    }

    //提交信息
    function submitInfo() {
        console.log(document.getElementById('grade').value)
        if (check()) {
            alert('非手机访问该网页无法提交,请使用手机端访问!')
            return;
        }
        const nickName = document.getElementById('userName').value;
        const qqInfo = document.getElementById('qq').value;
        const email = document.getElementById('email').value;
        const phone = document.getElementById('phone').value;
        const college = document.getElementById('college').value;
        const grade = document.getElementById('grade').value;
        const code = document.getElementById('code').value;
        const urlId = decode();
        let data = {
            nickName, qqInfo, email, phone, college, grade, code,urlId
        };
        const submitUrl = '/info/create';
        axios.post(host + submitUrl, data)
            .then(res => {
                if (res.data.code === 200) {
                    alert('提交成功!')
                } else {
                    alert(res.data.message)
                }
            })
            .catch(exception => {
                console.log(exception)
            })
        return false;
    }

    window.onload = function () {
        if (check()) {
            alert('非手机访问该网页将无法提交,请使用手机端访问!')
        }
        setP();
    }

    //检查手机还是电脑端访问
    function check() {
        //True为电脑客户端，False为手机客户端
        const userAgentInfo = navigator.userAgent;
        const Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
        let flag = true;
        for (let v = 0; v < Agents.length; v++) {
            if (userAgentInfo.indexOf(Agents[v]) > 0) {
                flag = false;
                break;
            }
        }
        console.log(flag)
        return flag;
    }
</script>
</body>
</html>